<template>
  <div class="page has-navbar" v-nav="{ title: 'Home' }">
    <div class="page-content text-center">
      <tabs :tab-items="tabs" :tab-index="tabIndex" :on-tab-click="onTabClick"></tabs>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        tabs: [
          "tab 1",
          "tab 2",
          "tab 3"
        ],
        tabIndex: 0
      }
    },
    methods: {
      onTabClick(index) {
        this.tabIndex = index
      }
    }
  }
</script>
<style lang="less">
  h2 {
    font-family: Candara,Calibri,Segoe,Segoe UI,Optima,Arial,sans-serif;
    color: #888;
  }
  .page.has-navbar .page-content {
    padding-top: 100px;
  }
  .padding {
    width:750px;
    border:1px solid #000;
  }
  .test {
    font-size:32px;
  }
</style>
